<template>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="耗材名称">
          <el-input v-model="searchForm.name" @keydown.enter.prevent="loadConsumables" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" @change="loadConsumables" placeholder="请选择" style="width: 100px">
            <el-option v-for="item in ConsumablesStatus" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="loadConsumables">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin:5px;">
      <div style="margin: 10px 0 40px 10px;">
        耗材信息列表
        <el-button @click="addConsumables" type="primary" style="float:right;margin-top: -3px;">新增耗材类别</el-button>
      </div>
      <div>
        <el-table :data="consumablesArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column  prop="name" label="耗材名称" align="center"></el-table-column>
          <el-table-column  prop="description" label="耗材描述" align="center" ></el-table-column>
          <el-table-column  prop="status" label="耗材状态" align="center" :formatter="ConsmsStatusFormatter"></el-table-column>
          <el-table-column  prop="quantity" label="耗材数量" align="center"></el-table-column>
          <el-table-column  prop="startTime" label="创建时间" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="耗材更新时间" align="center"></el-table-column>
          <el-table-column  prop="deleteTime" label="删除时间" align="center"></el-table-column>
          <el-table-column  prop="price" label="耗材购入单价" align="center"></el-table-column>
          <el-table-column  prop="manufacturer" label="耗材厂商" align="center"></el-table-column>
          <el-table-column  prop="remark" label="其他备注信息" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="edit(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="del(scope.row.id)" v-if="scope.row.status==40" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin:30px;float: right;">
          <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[5, 10, 15, 20]"
              v-model:current-page="searchForm.pageNum"
              v-model:page-size="searchForm.pageSize"
              v-model:total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-form-item label="耗材名称">
          <el-input v-model="dialogForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dialogForm.description" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="dialogForm.status"  placeholder="请选择" >
            <el-option v-for="item in ConsumablesStatus" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="dialogForm.quantity" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="购入单价">
          <el-input v-model="dialogForm.price" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="耗材厂商">
          <el-input v-model="dialogForm.manufacturer" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="dialogForm.remark" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saveConsumables" type="primary">保存</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const consumablesArr = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const ConsumablesStatus=ref([])
const dialogForm= ref({})
const searchForm = ref({
  pageNum:1,
  pageSize:5
})
const total= ref(1)

const handleSizeChange= (val) => {
  searchForm.value.pageSize=val
  loadConsumables()
}
const handleCurrentChange= (val) => {
  searchForm.value.pageNum=val
  loadConsumables()
}
onMounted(()=>{
  loadConsumables();
  loadDictOptions(ConsumablesStatus,'ConsmsStatus');
})
const ConsmsStatusFormatter=(row,column,cellValue,index)=>{
  if (!ConsumablesStatus){
    return cellValue;
  }
  for (let item of ConsumablesStatus.value){
    if (item.value == cellValue){
      cellValue = item.label
    }
  }
  return cellValue;
}
const reset=()=>{
  searchForm.value={}
  loadConsumables()
}
const addConsumables = ()=>{
  dialogVisible.value=true
  dialogTitle.value='新增耗材信息'
  dialogForm.value={}
}
const saveConsumables = ()=>{
  console.log(dialogForm.value)
  axios.post(BASE_URL+'/v1/consumables/save',dialogForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success(response.data.msg)
          dialogVisible.value=false
          loadConsumables()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const loadConsumables = ()=>{
  console.log(searchForm.value)
  axios.post(BASE_URL+'/v1/consumables/select',searchForm.value)
      .then((response)=>{
        if (response.data.code==2000) {
          consumablesArr.value = response.data.data.list
          total.value = response.data.data.total
          if (searchForm.value.status != 40) {
            consumablesArr.value = consumablesArr.value.filter(item => item.status != 40)
          }
          console.log(consumablesArr.value)
        }else {
            ElMessage.error(response.data.msg)
          }
      })
}
const handleClose = () => {
  if(confirm("确定关闭弹窗吗")) {
    dialogVisible.value = false
  }
}
// const statusFormat = (row, column, cellValue, index) => {
//   if (cellValue==10){
//     return '正常'
//   }else if (cellValue==40){
//     return '已删除'
//   }
// }
const del = (id)=>{
  axios.delete(BASE_URL+'/v1/consumables/delete/'+id)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success(response.data.msg)
          loadConsumables()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const edit = (row)=>{
  dialogVisible.value=true
  dialogTitle.value='编辑耗材信息'
  dialogForm.value=row
}
</script>

<style scoped>

</style>